<template>
    <div>
        <h1>大头儿子</h1>
        <h3>{{ money }}</h3>
        <h3>{{ list }}</h3>
        <ul>
            <li v-for="(item, index) in list" :key="index">
                {{ item.name }}----{{ item.age }}
            </li>
        </ul>
        <button @click="btn">测试props传递过来的数据是否可以改动</button>
    </div>
</template>

<script>
export default {
    name: "",
    /* props父传子  
    props的格式
    ①props: ["money", "list"] props只指定了属性名，属性名以字符串的格式放到数组当中
    ②
    props: {
        money: {
            type: String,
        },
        list: {
            type: Array,
        },
    },
    指定了传递过来的值属性名及类型
    ③
    props: {
        money: {
            type: String,
            //   required: true,//要求属性必须传递不传递就会报错
        },
        list: {
            type: Array,
        },
    },

    不要修改props中的值，如果要改动，请在父元素中进行更改（初始值的值在哪里就去哪里更改）
    当改动了props中的值后，基本数据类型会报错，引用数据类型不会报错，但是这种做法违背组件之间传值的单项数据流的概念 不建议这种方式

     */
    //   props: ["money", "list"],

    props: {
        money: {
            type: String,
            //   required: true,//要求属性必须传递不传递就会报错
        },
        list: {
            type: Array,
        },
    },
    data() {
        return {};
    },

    methods: {
        btn() {
            console.log(this.money);
            //   this.money = "200w";
            console.log(this.list);
            this.list[0].age = 25;
        },
    },
};
</script>
<style lang='' scoped>

</style>